<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>天天点餐会员注册页面</title>
<link rel="stylesheet" th:href="@{/css/login/style.css}" />

</head>
<body>

	<div class="register-container">
		<h1>注册会员</h1>

		<div class="connect">
			<p style="left: 0%;">如有疑问请联系店员</p>
		</div>

		<form action="/register" method="post" id="registerForm" novalidate="novalidate">
			<div>
				<input name="name" class="username" placeholder="您的用户名" autocomplete="off" type="text" />
			</div>
			<div>
				<input name="password" class="password" placeholder="输入密码" type="password" />
			</div>
			<div>
				<input name="confirm_password" class="confirm_password" placeholder="再次输入密码" type="password" />
			</div>
			<div>
				<input name="phone" class="phone_number" placeholder="输入手机号码" autocomplete="off"
					id="number" type="text" />
			</div>
			<button id="register" type="button">注 册</button>
		</form>
		<a th:href="@{/login}">
			<button type="button" class="register-tis">已经有账号？</button>
		</a>

	</div>

	<ul id="supersized" class="quality">
		<li class="slide-1 activeslide"><a target="_blank"><img th:src="@{/img/login/2.jpg}"
				style="width: 100%; height: 956.2px;" /></a></li>
	</ul>
	<script type="text/javascript">
		$().ready(function() {
			$('#registerForm').validate({
				rules : {
					name : {
						required:true
					},
					phone : {
						required:true,
						digits:true,
						maxlength:11,
						minlength:11
					},
					password : {
						required:true,
						minlength:6
					}
				},
			});
			$('#register').click(function(){
				if($('#registerForm').valid()){
					$('#registerForm').submit();
				}
			});
		});
	</script>
	<script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.metadata.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/messages_zh.js}"></script>
</body>
</html>